<template>
  <div>
    <div class="ui-form backwhite">
      <label for="#" class="labal f16">手机号</label>
      <input type="tel" placeholder="请输入手机号" maxlength="11" v-model="msg">
    </div>
    <div class="ui-form backwhite magT20">
      <label for="#" class="labal f16">验证码</label>
      <input type="number"
             placeholder="请输入短信验证码"
             maxlength="6">
      <button class="butBorder  butHei backwhite" @click="time()" v-if="bool">获取验证码</button>
      <button class="butBorder  butHei backwhite" v-else >{{num}}</button>
    </div>
    <p :class="{shade:flags}"></p>
  </div>
</template>
<script>
  export default {
      data(){
        return{
//            num : 60,
//            bool:true,
              msg:''

        }
      },
    watch:{
      msg:function(){
          this.$store.commit("getLogin",this.msg);
      }
    },
    methods:{
        time(){
            this.$store.commit("flagChange");
//          this.$store.commit("boolChange");
//            let timeId = setInterval(() => {
//                this.num--;
//                if (this.num==0) {
//                    clearInterval(timeId)
//                }
//                console.log(this.num)
//            },1000)
        }
    },
    computed:{
          flags(){
            return this.$store.state.flags;
          },
          bool(){
            return this.$store.state.bool;
          },
          num(){
            return this.$store.state.number;
          }
    }
  }
</script>
<style>
  .ui-form{
    width: 100%;
    line-height: .5rem;
  }
  .ui-form input{
    border: 0;
    vertical-align: middle;
    outline:none;
    /*color:#666;*/
    font-family: "微软雅黑";
    font-size: .13rem;
    color:#000;
  }
  input::-webkit-input-placeholder{ color:#bbb;}
  input:-moz-placeholder{ color:#bbb;}
  input::-moz-placeholder{ color:#bbb;}
  input:-ms-input-placeholder{ color:#bbb;}

  .ui-form input[type="number"]{
    width: 1.2rem;
  }
  .backwhite{
    background: white;
  }
  .labal{
    width: .65rem;
    height: .5rem;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: .5rem;
  }
  .butBorder{
    border:0;
    text-align: center;
    vertical-align: middle;
    outline:none;
  }
  .butHei{
    color: #ff6900;
    height: .21rem;
    line-height: .17rem;
    border-left: 1px solid grey;
    font-size: 14px;
  }
  .magT20{
    margin-top: .2rem;
  }

  .shade{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    position: absolute;
    left:0;
    top:0;
  }
</style>
